<template>
	<su-popup :show="modelValue" type="top" round="10" :space="sys_navBar + 40" backgroundColor="#fff"
		:zIndex="10" @close="emit('update:modelValue',false)" @change="popupChange">
		<view class="position-content ss-flex ss-col-top" :style="{'--level1-color':state?.children?.length?'#eee':'#fff'}">
			<!-- 一级 -->
			<view class="level1 ss-flex-1"  style="height: 450px;">
				<view :class="['level1-item',{'level-active':state.data.key == item.key}]" 
					v-for="item in state.list" :key="item.id" @click="setLevel1(item)">
					<view class="level-save" v-if="state.activeSave.key == item.key&&state.data.key != item.key" />
					{{item.name}}
				</view>
			</view>
			<!-- 二级 -->
			<view class="level2  ss-flex-1"  v-if="state?.children?.length">
				<scroll-view  scroll-y style="height: 450px;">
					<view v-for="item in state.data.list" :key="item.id" @click="setLevel2(item)"
					  :class="['level2-item ss-line-1',{'level-active':state.secondary == item.id}]" >
						 {{item.name}}
					</view>
				</scroll-view>
			</view>
			<!-- 三级 -->
			<view class="level3  ss-flex-1" >
				<scroll-view  scroll-y style="height: 450px;">
					<view v-for="item in state.children.length ? state.children : state.data.list" 
						:key="item[state.data.value]" class="level3-item"  @click="findData(item)">
						<c-option :label="item.name" :multi="state.data.multi"  
							:active=" activeData.includes(item[state.data.value]) "/>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottomBtn ss-flex">
			<button class="ss-reset-button reset" @click="onReset">重置</button>
			<button class="ss-reset-button submit" :style="{'--color':activeColor}" @click="submit">完成</button>
		</view>
	</su-popup>
</template>

<script setup>
	import sheep from '@/sheep';
	import { reactive, computed, onBeforeUnmount,nextTick ,watch} from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import cOption from './c-option.vue';
	import { cloneDeep } from 'lodash'
	const sys_navBar = sheep.$platform.navbar;
	const emit = defineEmits(['update:modelValue','change'])
	const props = defineProps({
		modelValue:{
			type:Boolean,
			default:false
		},
		data:{
			type:Object,
			default:()=>({})
		},
		activeColor: {
			type: String,
			default: '#1AC6A0'
		}
	})
	const state = reactive({
		set:'',
		secondary:'',
		data:{},
		// 选项缓存
		activeSave:{
			ids:[],
			active:[],
			key:''
		},
		// 二级数据缓存
		children:[],
		// 地址数据
		list:[
			{
				key:'distance',
				ids:[],
				active:[],
				name:'我的附近',
				value:'value',
				template:'',
				multi:false,
				list:[]
			},
			{
				key:'business_area_id',
				ids:[],
				active:[],
				name:'热门商圈',
				value:'attion_id',
				template:'',
				multi:true,
				list:[]
			},
			{
				key:'district_id',
				ids:[],
				active:[],
				name:'行政区',
				value:'id',
				template:'',
				multi:false,
				list:[]
			},
			{
				key:'subway_id',
				ids:[],
				active:[],
				name:'地铁线',
				value:'id',
				template:'',
				multi:false,
				list:[]
			}
		]
		
	})
	onLoad((opt)=>{
	})
	watch(()=>props.data,(newVal,oldVal)=>{
		initData()
	})
	const recommend = {
		id: 999901,
		pid: 9999,
		name: "推荐",
		children: []
	}
	const activeData =  computed(()=>state.list.find(item=>item.key == state.data.key)?.ids||[])
	function initData(){
		let business = cloneDeep(props.data.district_hot_business)
		recommend.children = cloneDeep(props.data.recommend_hot_business).map(item=>({...item,attion_id:item.id}))
		business.unshift(recommend)
		findList('business_area_id',business)
		findList('district_id',props.data.district)
		findList('subway_id',props.data.subway)
		findList('distance',props.data.distance_unit)
		setLevel1(state.list[0])
		state.set = state.data.key
		state.activeSave.set = state.set
	}
	function setLevel1(data){
		if(state.data.key != data.key){
			state.data = {}
			state.secondary='',
			state.children=[]
			state.data = cloneDeep(data)
			if(data?.list[0]?.children){
				setLevel2(data.list[0])
			}
		}
	}
	function setLevel2(data){
		if(state.secondary != data.id || !state.secondary){
			state.children=[]
			state.children=cloneDeep(data.children)
			state.secondary = data.id
		}
	}
	// 选择数据
	function findData(data,key = state.data.key,reset=true){
		if(key!=state.set&&reset){
			onReset()
		}
		state.set = key
		let index = state.list.findIndex(item=>item.key == key)
		if(index!== -1){
			if(state.data.multi){
				let ind = state.list[index].active.findIndex(val=>val[state.data.value] == data[state.data.value])
				if(ind === -1){
					state.list[index].active.push(data)
					state.list[index].ids.push(data[state.data.value])
				}else{
					state.list[index].active.splice(ind, 1)
					state.list[index].ids.splice(ind,1)
				}
			}else{
				state.list[index].active = [data]
				state.list[index].ids = [data[state.data.value]]
			}
		}else{
			console.log('findData写入失败--->',key)
		}
	}
	// 切换关闭时还原数据
	function popupChange(e){
		if(!e.show){
			onReset()
		}else{
			let index =  state.list.findIndex(item=>item.key == state.activeSave.key)
			if(index !== -1){
				setLevel1(state.list[index])
			}
			state.set = state.activeSave.key
			state.activeSave.active.forEach(data=>{
				 findData(data,state.activeSave.key,false)
			})
		}
	}
	// 寻找并写入到制定Key中
	function findList(key,val){
		let index = state.list.findIndex(item=>item.key == key)
		if(index!== -1){
			if(key == 'business_area_id'){
				state.list[index].list = val.filter((val)=>val.children.length)
			}else{
				state.list[index].list = val
			}
		}else{
			console.log('findList写入失败--->',key)
		}
	}
	// 重置搜索数据
	function onReset(){
		state.list.forEach(item=>item.active = [])
		state.list.forEach(item=>item.ids = [])
	}
	// 保存搜索数据
	function activeSaveFun(){
		state.activeSave = {
			ids:[],
			active:[],
			key:state.set
		}
		state.list.forEach(item=>{
			if(item.ids?.length){
				state.activeSave.key = item.key
				state.activeSave.ids = cloneDeep(item.ids)
				state.activeSave.active = cloneDeep(item.active)
			}
		})
	}
	function submit(){
		activeSaveFun()
		emit('change',cloneDeep(state.activeSave))
		emit('update:modelValue',false)
	}
	function onItem(item){
		emit('change',item)
		emit('update:modelValue',false)
	}
	
</script>

<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	.bottomBtn{
		height: 60px;
		padding: 10px 10px;
		&>button{
			flex:1;
			height: 40px;
			margin: 0 10px;
			border-radius: 20px;
		}
		.reset{
			border:1px solid #ddd;
			color:#333;
			font-size: 32rpx;
		}
		.submit{
			color:#fff;
			background: var(--color);
			font-size: 32rpx;
		}
	}
	.position-content{
		height: 450px;
		.level1{
			background-color: #ddd;
			min-width: 160rpx;
			max-width: 160rpx;
			.level1-item{
				padding: 0 10px;
				color: #444;
				line-height: 80rpx;
				height: 80rpx;
				position: relative;
			}
			.level-active{
				background-color: var(--level1-color);
			}
			.level-save{
				background-color: #1AC6A0;
				width: 6rpx;
				height: 30rpx;
				position: absolute;
				left: 8rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		.level2{
			background-color: #eee;
			min-width: 160rpx;
			max-width: 160rpx;
			.level2-item{
				padding: 0 10px;
				color: #444;
				line-height: 80rpx;
				height: 80rpx;
			}
		}
		.level3{
			.level3-item{
				padding: 0 30rpx;
			}
		}
		.level-active{
			position: relative;
			z-index: 10;
			font-weight: 600;
			background-color: #fff;
			color: #333 !important;
		}
	}
</style>